<template>
  <scroll-view @scrolltolower="handlerToLower" class="recommends_view" scroll-y v-if="recommends.length > 0">
    <!-- 推荐 -->
    <view class="recommends_wrap">
      <navigator class="recommends_item" v-for="item in recommends" :key="item.id"
        :url="`/pages/album/index?id=${item.target}`">
        <image mode="widthFix" :src="item.thumb"></image>
      </navigator>
    </view>
    <!-- 月份 -->
    <view class="monthes_wrap">
      <view class="monthes_title">
        <view class="monthes_title_info">
          <view class="monthes_info">
            <text> {{monthes.DD}} </text>
            /{{monthes.MM}} 月
          </view>
          <view class="monthes_text">{{monthes.title}}</view>
        </view>
        <view class="monthes_title_more">更多 > </view>
      </view>
      <view class="monthes_content">
        <view class="monthes_item" v-for="(item,index) in monthes.items" :key="item.id">
          <go-detail :list="monthes.items" :index="index">
            <image mode="aspectFill" :src="item.thumb+item.rule.replace('$<Height>',360)"></image>
          </go-detail>
        </view>
      </view>
    </view>
    <!-- 热门 -->
    <view class="hots_wrap">
      <view class="hots_title">
        <text>热门</text>
      </view>
      <view class="hots_content">
        <view class="hots_item" v-for="(item, index) in hots" :key="item.id">
          <go-detail :list="hots" :index="index">
            <image mode="widthFix" :src="item.thumb"></image>
          </go-detail>
        </view>
      </view>
    </view>
  </scroll-view>
</template>

<script>
  import moment from "moment"
  import goDetail from "@/components/goDetail"
  export default {
    data() {
      return {
        // 请求的参数
        params: {
          limit: 30,
          order: "hot",
          skip: 0
        },
        // 是否有下页数据
        hasMore: true,
        // 推荐模块数据
        recommends: [],
        // 月份模块数据
        monthes: {},
        // 热门模块数据
        hots: []
      }
    },
    methods: {
      // 获取数据数据
      getList() {
        this.request({
          url: "http://service.picasso.adesk.com/v3/homepage/vertical",
          data: this.params,
        }).then(result => {
          /* console.log(result) */

          // 判断还有没有下一页数据
          if (result.res.vertical.length === 0) {
            this.hasMore = false
            uni.showToast({
              title: "没有更多数据了！",
              icon: "none"
            })
            return
          }

          // 第一次发送请求执行
          if (this.recommends.length === 0) {
            // 推荐模块的数据
            this.recommends = result.res.homepage[1].items
            // 月份模块的数据
            this.monthes = result.res.homepage[2]
            // 将 时间戳 改成 18号/月; 使用 moment.js 库
            this.monthes.MM = moment(this.monthes.stime).format("MM")
            this.monthes.DD = moment(this.monthes.stime).format("DD")
          }

          // 热门模块的数据
          // 数组拼接 es6
          this.hots = [...this.hots, ...result.res.vertical]
          // console.log(this.hots)
        })
      },
      // 滚动条触底事件
      handlerToLower() {
        // console.log("我是你大爷！")
        /* 
        1 修改参数skip+=limit;
        2 重新发送请求getList()
        3 请求回来成功hots数据的叠加
        */
        if (this.hasMore) {
          this.params.skip += this.params.limit
          this.getList()
        } else {
          // 弹窗提示用户
          uni.showToast({
            title: "没有数据了",
            icon: "none"
          })
        }
      }
    },
    components: {
      goDetail,
    },
    mounted() {
      // 设置页面标题
      uni.setNavigationBarTitle({
        title: "推荐"
      })
      // 初始化数据
      this.getList()
    },

  }
</script>

<style lang="scss" scoped>
  .recommends_view {
    // height：屏幕的高度 - 头部标题的高度
    height: calc(100vh - 36px);

    .recommends_wrap {
      display: flex;
      flex-wrap: wrap;

      .recommends_item {
        width: 50%;
        border: 5rpx solid #fff;
      }
    }

    .monthes_wrap {
      .monthes_title {
        display: flex;
        justify-content: space-between;
        padding: 20rpx;

        .monthes_title_info {
          color: $theme-font-color;
          font-weight: 600;
          display: flex;

          .monthes_info {
            text {
              font-size: 36rpx;
            }
          }

          .monthes_text {
            font-size: 34rpx;
            color: #666;
            margin-left: 30rpx;
          }
        }

        .monthes_title_more {
          font-size: 24rpx;
          color: $theme-font-color;
        }
      }

      .monthes_content {
        display: flex;
        flex-wrap: wrap;

        .monthes_item {
          width: 33.33%;
          border: 5rpx solid #fff;

          image {}
        }
      }
    }

    .hots_wrap {
      .hots_title {
        padding: 20rpx;

        text {
          border-left: 20rpx solid $theme_font_color;
          padding-left: 20rpx;
          font-size: 34rpx;
          font-weight: 600;
        }
      }

      .hots_content {
        display: flex;
        flex-wrap: wrap;

        .hots_item {
          width: 33.33%;
          border: 5rpx solid #fff;

          image {}
        }
      }
    }
  }
</style>
